<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>订单中心</title>
    <link href="../css.min/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/common.css" />
    <style>
    	.mui-loading{margin-top: 50px;}
    	.mui-segmented-control.mui-segmented-control-inverted{background-color: #ecf0f1 !important;}
    	.mui-control-item.mui-active{color: #EE4B62 !important;}
    	.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color: #EE4B62 !important;}
    	.mui-control-item{font-family: "微软雅黑";font-style:normal;}
    	.mui-error.two-line>h5{color: white;padding-bottom: 10px;}
    	.mui-error>h5{color: white;}
    	#unpay,#pay{border-bottom: none;}
    </style>
</head>
<body>
	<div class="mui-content">
		<div id="slider" class="mui-slider mui-fullscreen">
				<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#unpay">
						未支付
					</a>
					<a class="mui-control-item" href="#pay">
						已支付
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="unpay" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-error login-out two-line mui-text-center">
									<h5>您还未登录呢，登录查看未支付订单吧</h5>
									<button type="button" onclick="gotoLogin();" class="mui-btn mui-btn-danger">去登录</button>
								</div>
							</div>
						</div>

					</div>
					<div id="pay" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-error login-out two-line mui-text-center">
									<h5>您还未登录呢，登录查看已支付订单吧</h5>
									<button type="button" onclick="gotoLogin();" class="mui-btn mui-btn-danger">去登录</button>
								</div>
								<!--<div class="mui-loading mui-text-center mui-h6">
									<div class="mui-spinner">
									</div>
									请求订单中...
								</div>-->
								<!--<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
							        <li class="mui-table-view-cell">
							            <div class="mui-table">
							                <div class="mui-table-cell mui-col-xs-9 mui-col-sm-7">
							                    <p class="mui-ellipsis">订单编号：201505223033</p>
							                    <h5 class="mui-ellipsis">寄送到：六爷</h5>
							                    <h5 class="mui-ellipsis">联系电话：13913848546</h5>
							                    <h5 class="mui-ellipsis-2">地址：宁波市鄞州区四明8路</h5>
							                    <p class="mui-h6">尺寸：4寸（10.2cm×7.6cm），相纸：柯达Kodak</p>
							                </div>
							                <div class="mui-table-cell mui-col-xs-3 mui-col-sm-5 mui-text-left">
							                    <h4 class="mui-ellipsis-2">¥23.98</h4>
							                </div>
							            </div>
							        </li>
							   </ul>-->
							</div>
						</div>
					</div>
				</div>
		</div>
	</div>
</body>
<script src="../js.min/mui.min.js"></script>
<script type="text/javascript" src="../js/config.js" ></script>
<script type="text/javascript" src="../js/utils.js" ></script>
<script type="text/javascript" src="../js/cache.js" ></script>
<script type="text/javascript" charset="utf-8">
    mui.init();
    
    mui('.mui-scroll-wrapper').scroll({
		indicators: true //是否显示滚动条
	});
	
	var SliderDiv=null,PayItem=null,UnpayItem=null;
	document.addEventListener("DOMContentLoaded",function(){
		SliderDiv=document.getElementById("slider");
		PayItem=document.getElementById("pay");
		UnpayItem=document.getElementById("unpay");
		
		/*SliderDiv.addEventListener('slide', function(e){
			if (e.detail.slideNumber === 0) {
				if (PayItem.querySelector('.mui-loading')) {
					PayItem.querySelector('.mui-scroll').innerHTML = "";
				}
			} else if (e.detail.slideNumber === 1) {
				if (UnpayItem.querySelector('.mui-loading')) {
					UnpayItem.querySelector('.mui-scroll').innerHTML = "";
				}
			}
			
		});*/
		
	});
	
	/**
	 * h5+ ready
	 */
	mui.plusReady(function(){
		//getOrderMenuList();
		//mui.log(plus.webview.currentWebview().id);
	});
	
	window.addEventListener("RefreshPage",function(e){
    	getOrderMenuList();
    });
	
	/**
	 * 
	 */
	function getOrderMenuList(){
		var me=this;
		
		if(CACHE.Login()=="true" && CACHE.UserName()){
			PayItem.querySelector('.mui-scroll').innerHTML=getLoading().outerHTML;
			UnpayItem.querySelector('.mui-scroll').innerHTML=getLoading().outerHTML;
			
			mui.ajax_query("getOrderMenus!PPH",{userName:CACHE.UserName()},
			function(json){
				//me.wa.close();
				if(!json) return;
				
				var ulPay=getTableView();
				var ulUnpay=getTableView();
				for (var i = 0; i < json.length; i++) {
					var v=json[i];
					
					if(v.pay==1){//已支付
						ulPay.appendChild(getTableViewCell(
						getNoneData(v.orderID),getNoneData(v.contact_name),
						getNoneData(v.contact_phone),getNoneData(v.contact_address),
						getNoneData(v.product_des),getNoneData(v.product_total),
						getNoneData(1)
						));
					}else if(v.pay==2){//未支付
						ulUnpay.appendChild(getTableViewCell(
						getNoneData(v.orderID),getNoneData(v.contact_name),
						getNoneData(v.contact_phone),getNoneData(v.contact_address),
						getNoneData(v.product_des),getNoneData(v.product_total),
						getNoneData(2)
						));
					}
					
				}
				
				if(ulPay.hasChildNodes()){
					PayItem.querySelector('.mui-scroll').innerHTML=ulPay.outerHTML;
				}else{//无未支付订单
					PayItem.querySelector('.mui-scroll').innerHTML=getPayNone().outerHTML;
				}
				
				if(ulUnpay.hasChildNodes()){
					UnpayItem.querySelector('.mui-scroll').innerHTML=ulUnpay.outerHTML;
				}else{//无已支付订单
					UnpayItem.querySelector('.mui-scroll').innerHTML=getUnPayNone().outerHTML;
				}
				
				mui(".mui-table-view").on('tap','.mui-table-view-cell',function(e){
					e.pay=this.getAttribute("pay");
					if(e.pay==2){//未支付
						//e.orderNumb=this.getAttribute("orderNumber");
					}
					
				});
				
			},
			function(c,m){
				//me.wa.close();
				PayItem.querySelector('.mui-scroll').innerHTML=getErrorTips().outerHTML;
				UnpayItem.querySelector('.mui-scroll').innerHTML=getErrorTips().outerHTML;
			});
		}else{
			//未登录
			if(!PayItem.querySelector('.login-out') || !UnpayItem.querySelector('.login-out')){
				PayItem.querySelector('.mui-scroll').innerHTML=getLoginOutTips("您还未登录呢，登录查看已支付订单吧").outerHTML;
				UnpayItem.querySelector('.mui-scroll').innerHTML=getLoginOutTips("您还未登录呢，登录查看未支付订单吧").outerHTML;
			}
		}
		
	}
	
	/**
	 * 
	 * @param {Object} s
	 */
	function getLoginOutTips(s){
		var div=document.createElement("div");
		div.className="mui-error login-out two-line mui-text-center";
		div.innerHTML='<h5>'+s+'</h5>'+
			'<button type="button" onclick="gotoLogin();" class="mui-btn mui-btn-danger">去登录</button>';
		
		return div;
	}
	
	/**
	 * 
	 */
	function gotoLogin(){
		utils.openWindow("login","login.html","slide-in-right",300,false);
	}
	
	/**
	 * 
	 */
	function getLoading(){
		var div=document.createElement("div");
		div.className="mui-loading mui-text-center mui-h6";
		div.innerHTML='<div class="mui-spinner"></div>请求订单中...';
		
		return div;
	}
	
	/**
	 * 
	 */
	function getUnPayNone(){
		var div=document.createElement("div");
		div.className="mui-error two-line mui-text-center";
		div.innerHTML=
		'<h5>没有未支付的订单</h5>'+
		'<button type="button" onclick="gotoPrintSett();" class="mui-btn mui-btn-danger">'+
			'去下单'+
		'</button>';
		
		return div;
		
	}
	
	/**
	 * 
	 * @param {Object} str
	 */
	function getErrorTips(str){
		var div=document.createElement("div");
		div.className="mui-error two-line mui-text-center";
		div.innerHTML=
		'<h5>'+str+'</h5>'+
		'<button type="button" onclick="getOrderMenuList();" class="mui-btn mui-btn-danger">'+
			'刷新'+
		'</button>';
		
		return div;
	}
	
	/**
	 * 
	 */
	function getPayNone(){
		var div=document.createElement("div");
		div.className="mui-error mui-text-center";
		div.innerHTML=
		'<h5>没有已支付订单</h5>';
		
		return div;
		
	}
	
	/**
	 * 
	 */
	function gotoPrintSett(){
		utils.openWindow("printsetting","printsetting.html","slide-in-right",300,false);
	}
	
	
	/**
	 * 
	 * @param {Object} data
	 */
	function getNoneData(data){
		var defaultTips="数据缺失";
		return data || defaultTips;
	}
	
	/**
	 * 
	 */
	function getTableView(){
		var ul=document.createElement("ul");
		ul.className="mui-table-view mui-table-view-striped mui-table-view-condensed";
		
		return ul;
	}
	
	/**
	 * 
	 * @param {Object} _orderNumb
	 * @param {Object} _sendName
	 * @param {Object} _contactNumb
	 * @param {Object} _address
	 * @param {Object} _des
	 * @param {Object} _totalPrice
	 */
	function getTableViewCell(_orderNumb,_sendName,_contactNumb,_address,_des,_totalPrice,_pay){
		var li=document.createElement("li");
		li.className="mui-table-view-cell";
		li.setAttribute("orderNumber",_orderNumb);
		li.setAttribute("pay",_pay);
		//li.orderNumber=_orderNumb;
		//li.pay=_pay;
		
		var tb=document.createElement("div");
		tb.className="mui-table";
		
		var tbcell_left=document.createElement("div");
		tbcell_left.className="mui-table-cell mui-col-xs-9 mui-col-sm-7";
		var orderNumb=document.createElement("p");
		orderNumb.className="mui-ellipsis";
		orderNumb.innerHTML="订单编号："+_orderNumb;
		var sendName=document.createElement("h5");
		sendName.className="mui-ellipsis";
		sendName.innerHTML="寄送到："+_sendName;
		var contactNumb=document.createElement("h5");
		contactNumb.className="mui-ellipsis";
		contactNumb.innerHTML="联系电话："+_contactNumb;
		var address=document.createElement("h5");
		address.className="mui-ellipsis";
		address.innerHTML="地址："+_address;
		var des=document.createElement("p");
		des.className="mui-h6";
		des.innerHTML=_des;
		
		tbcell_left.appendChild(orderNumb);
		tbcell_left.appendChild(sendName);
		tbcell_left.appendChild(contactNumb);
		tbcell_left.appendChild(address);
		tbcell_left.appendChild(des);
		
		var tbcell_right=document.createElement("div");
		tbcell_right.className="mui-table-cell mui-col-xs-3 mui-col-sm-5 mui-text-left";
		var price=document.createElement("h4");
		price.className="mui-ellipsis-2";
		price.innerHTML=_totalPrice;
		
		tbcell_right.appendChild(price);
		
		tb.appendChild(tbcell_left);
		tb.appendChild(tbcell_right);
		
		li.appendChild(tb);
		
		return li;
		
	}
    
</script>
</html>